<template>
  <div>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 顶部盒子 -->
      <div>
        <el-form ref="form" style="line-height:32px;">
          <el-button type="success" icon="el-icon-edit" size="small" class="fr" style="margin-left:10px;" @click="addUserList">新增用户</el-button>
          <el-form-item class="fl">
            <el-input
            style="width: 200px;"
            class="filter-item"
            v-model="query.username"
            placeholder="根据用户名搜索"></el-input>
            <el-button class="filter-item"
                size="small"
                type="defalut"
                @click="removeInput"
                style="margin-left:15px">清空</el-button>
            <el-button class="filter-item"
                size="small"
                type="primary"
                style="margin-left:15px"
                @click="getList">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 警告栏 -->
      <el-alert
      style="margin-bottom:20px"
        type="info"
        show-icon>
        共有{{counts}}条数据
      </el-alert>
      <!-- tab列表栏 -->
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          align="center"
          prop="username"
          label="用户名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="permission_group_title"
          label="权限组名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="role"
          label="角色">
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="editUserList(scope.row)"></el-button>
            <el-button
            @click="removeUserById(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 6, 7, 8]"
        :page-size="query.pagesize"
        background
        layout=" sizes, prev, pager, next, jumper"
        :total="counts">
      </el-pagination>
    </el-card>
    <!-- 添加用户对话框 -->
    <el-dialog
      @close="addDialogClose"
      title="创建用户"
      :visible.sync="addUserDialogVisible"
      width="50%">
      <!-- 表单验证 -->
      <el-form :model="addFormDate" :rules="addUserRules" ref="ruleFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addFormDate.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addFormDate.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addFormDate.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="addFormDate.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="addFormDate.permission_group_id" placeholder="请选择">
            <el-option label="超级管理员组" :value=2></el-option>
            <el-option label="编辑组" :value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="addFormDate.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input v-model="addFormDate.introduction" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserSuccess">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
    <el-dialog
      @close="addDialogClose"
      title="修改用户"
      :visible.sync="editUserDialogVisible"
      width="50%">
      <!-- 表单验证 -->
      <el-form :model="editList" :rules="addUserRules" ref="ruleFormRef" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editList.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editList.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editList.password"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="editList.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="editList.permission_group_id" placeholder="请选择">
            <el-option label="超级管理员组" :value=2></el-option>
            <el-option label="编辑组" :value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editList.phone"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input v-model="editList.introduction" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSuccess">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/base/users'
export default {
  data () {
    return {
      list: [],
      addUserDialogVisible: false,
      editUserDialogVisible: false,
      addUserRules: {
        username:[{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
      counts: 0,
      query: {
        // 当前页数
        page: 1,
        // 页尺寸
        pagesize: 5,
        username: ''
      },
      addFormDate: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: '',
        avatar: ''
        // permission_group:[
        //   {
        //     permission_group_id: '2',
        //     permission_group_title: '超级管理员组'
        //   },
        //   {
        //     permission_group_id: '3',
        //     permission_group_title: '编辑组'
        //   }
        // ]
      },
      editList:{}
    }
  },

  created () {
    this.getList()
  },

  methods: {
    // 获取列表数据
      async getList (params) {
      const { data: res } = await list(this.query)
      console.log(res)
      this.list = res.list
      this.counts = res.counts
    },
    addUserList () {
      this.addUserDialogVisible = true
    },
    // 添加按钮的重置表单
    addDialogClose () {
      this.$refs.ruleFormRef.resetFields()
    },
    // 新增用户
    addUserSuccess () {
      this.$refs.ruleFormRef.validate(async flag => {
        if (!flag) return
        console.log(this.addFormDate)
        await add(this.addFormDate)
        this.addUserDialogVisible = false
        this.getList()
      })
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getList(this.list)
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getList()
    },
    // 修改获取row内的数据
    editUserList (row) {
      this.editUserDialogVisible = true
      this.editList = row
    },
    // 修改用户确定按钮
    editUserSuccess () {
      this.$refs.ruleFormRef.validate(async flag => {
        if (!flag) return
        console.log(this.editList)
        await update({
          id: this.editList.id,
          avatar: this.editList.avatar,
          email: this.editList.email,
          introduction: this.editList.introduction,
          permission_group_id: this.editList.permission_group_id,
          phone: this.editList.phone,
          role: this.editList.role,
          username: this.editList.username,
        })
        this.$message.success('修改成功')
        this.editUserDialogVisible = false
        this.getList()
      })
    },
    // 删除
    removeUserById(row) {
      const data = {
        id: row
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await remove(data)
          if (res.status !== 200) return this.$message.error('删除失败')
          this.$message.success('删除成功!')
          this.getList()
        }).catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 清空列表
    removeInput () {
      this.query.username = ''
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 20px;
  .el-pagination {
    margin-top: 10px;
  }
}
#fr {
  float: right;
}
#fl {
  float: left;
}
#is-center {
  text-align: center;
}
</style>
